<template>
  <div>
    <!-- 控制折扣时出现 -->
    <div v-show="!flag">全场清仓，全部{{ newDiscount }}折</div>

    <ul>
      <li v-for="item in goods" :key="item.name">
        <div>{{ item.name }}</div>
        <div>{{ (item.price * item.discount).toFixed(2) }}元</div>
        <div>折扣：{{ item.discount * 100 }}%</div>
      </li>
    </ul>
    <!-- 可恢复和开始促销 -->
    <button @click="fn">{{ flag ? '点击开始促销' : '点击恢复价格' }}</button>
    <!-- 给输入框双向绑定num flag为true的时候显示 -->
    <input
      type="text"
      class="band"
      placeholder="折扣"
      v-model="num"
      v-show="flag"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      goods: [
        {
          name: 'mac电脑',
          price: '15000',
          discount: 1,
        },
        {
          name: '百事可乐',
          price: '3',
          discount: 1,
        },
        {
          name: '保温杯',
          price: '99',
          discount: 1,
        },
        {
          name: '保暖手套',
          price: '130',
          discount: 1,
        },
      ],
      num: '',
    }
  },
  methods: {
    // 开始促销事件和恢复
    fn() {
      if(this.num === '') return
      // 判断是否已经开始促销（开始为false，未开始为true)
      if (this.flag) {
        // 当未开始时，进行获取输入框输入的折扣
        console.log(this.num) 
        this.newDiscount = this.num
      }else{
        // 已经开始，让其结束，使折扣恢复
        this.num = ''
        this.newDiscount = 10
      }
      // 调用方法改变flag状态
      this.flag = !this.flag
    },
  },
  computed: {
    newDiscount: {
      get() {
        // 让折扣和输入框输入的内容绑定
        return this.num
      },
      set(val) {
        // 通过修改数据中的discount来控制折扣
        this.goods.forEach((item) => (item.discount = val / 10))
      },
    },
  },
  watch:{
    
  }
}
</script>

<style scoped>
/* 感谢老师的css样式， */
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  width: 200px;
  height: 80px;
  padding: 10px 0 0 0;
  border: 2px solid #333;
}
.band {
  width: 50px;
  border: #000 1px solid;
}
</style>
